<script setup lang="ts">
import { useRoute } from 'vue-router';
import { LookMoreInfo, getTabInfo } from '@/api/home';
import { type maxobj, type Item, type Body, type nextItem } from '@/typings';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const ct = ref()
const index = ref<number>(0)
const block_id = ref<number>(0)
const pid = ref<number>(0)

const obj = ref()
const flag = ref("")
const total = ref<maxobj>()
const title = ref<Body>()
const banner = ref<Array<Item>>([])
const product = ref<Array<Item>>()
const productIcon = ref<Array<nextItem>>([])
const tab = ref<Array<Item>>([])
const all = ref<maxobj>()
const route = useRoute();
const onClickLeft = () => history.back();
const hhh = async () => {
    let id = Number(route.params.id);
    let data = await LookMoreInfo(id);
    total.value = data;
    title.value = data.data.channel_global_config.body;
    banner.value = data.data.sections[0].body.items;
    product.value = data.data.sections[1].body.items
    productIcon.value = data.data.sections[1].body.next_items
    tab.value = data.data.channel_tab_list.body.items
    block_id.value = data.data.channel_tab_list.body.items[0].block_id
    pid.value = data.data.channel_tab_list.body.items[0].id
    setActive(block_id.value, pid.value, index.value)



};
hhh();


onMounted(() => {
    ct.value.addEventListener('scroll', handleScroll);


});
const handleScroll = () => {
    var offset = ct.value.scrollTop;
    let offsetH = obj.value.offsetHeight / 1.5
    let a = offset / offsetH
    flag.value = `background-color:rgba(255, 255, 255, ${a});`
    if (a > 200) {
        flag.value = `background-color:rgba(255, 255, 255, 1);`
    }
};

const setActive = async (blockId: number, id: number, i: number) => {
    index.value = i
    let size = 40
    let pageId = Number(route.params.id)
    let data = await getTabInfo(pageId, blockId, id, size)
    console.log(data);
    all.value = data
}
const router = useRouter()
const goSearch = ()=>{
router.push('search')
}
</script> 

<template>
    <div class="body" ref="ct">
        <div class="ct">
            <van-nav-bar class="nav" :style="flag" :title="title?.title" left-text="返回" left-arrow @click-left="onClickLeft"
                :border="false" fixed>
                <template #right>
                    <van-icon name="search" size="18"  @click="goSearch"/>
                </template>
            </van-nav-bar>
            <div class="banner" ref="obj">
                <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" :show-indicators="false">
                    <van-swipe-item v-for="item in banner" :key="item.action.path"><img
                            :src='`https:${item.img_url}`'></van-swipe-item>
                    <van-swipe-item v-for="item in banner" :key="item.action.path"><img
                            :src='`https:${item.img_url}`'></van-swipe-item>
                </van-swipe>
            </div>

            <div class="product">
                <p class="title">
                <div v-for="(item, i) in productIcon" :key="i" class="iconBox">
                    <img :src=item.img_url style="width: 13px;">
                    <span>{{ item.title }}</span>
                </div>
                </p>
                <div class="items">
                    <div class="item" v-for="item in product" :key="item.action.path">
                        <div class="pic">

                            <img :src='`https:${item.img_url}`'>
                        </div>
                        <p class="name">{{ item.title }}</p>
                    </div>
                </div>

            </div>
            <div class="showProduct">
                <van-sticky :offset-top="46">
                    <div class="tabNameBox">
                        <div class="tabName" v-for="(item, i) in tab" :key="item.id">
                            <span @click="setActive(item.block_id, item.id, i)" :class="{ active: index == i }">{{
                                item.title
                            }}</span>
                        </div>

                    </div>
                </van-sticky>

                <div v-masonry fit-width="true" transition-duration="0.3s" item-selector=".card" origin-left="false"
                    class="allPhone">
                    <div v-masonry-tile v-for="item in all?.data.sections" class="card">
                        <div class="productCt" v-for="i in item.body.items">
                            <router-link :to="{ name: 'info', params: { id: i.action.path } }">
                                <img :src="i.url"></router-link>

                            <h3 class="name"> {{ i.product_name }}</h3>
                            <div class="price"><span>￥{{ i.product_price }}</span> <span class="sjb">起</span> <span
                                    v-if="i.subtitle" class="icon">{{ i.subtitle }}</span></div>
                            <del class="oldPrice" v-if="i.prod_org_price">￥{{ i.prod_org_price }}</del>
                            <div class="type">{{ i.label_title }}</div>
                        </div>
                    </div>
                </div>
                <div class="nodata" v-if=!all?.data.sections[2]>
                    <img src="@/assets/empty.png">
                    没有数据了
                </div>

            </div>
        </div>

    </div>
</template>    
    

  
<style scoped>
img {
    width: 100%;
    vertical-align: middle;
}

.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
}

.body {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #f6f6f6;
    z-index: 99;
    overflow: auto;

}

.nav {
    background-color: transparent;
    transition: background-color 0.3s ease;
    z-index: 12;

}

.ct {
    position: relative;
}
.banner{
    margin-bottom: 180px;
}

.product {
    width: 90vw;
    position: absolute;
    top: 200px;
    left: 5vw;
    z-index: 9;
    padding: 13px 0;
    background-color: #ffffff;
    border-radius: 10px;
}

.product .title {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

}

.product .title .iconBox {
    height: 30px;
    line-height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: "微软雅黑";
    font-size: 12px;
    color: #ccc;

}

.product .items {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 12px;
    text-align: center;
}

.product .items .item {
    width: 20%;
    box-sizing: border-box;
    padding: 6px;
}



.showProduct {
    width: 100vw;
    margin: 50px auto;

}

.nodata {
    position: absolute;
    top: 578px;
    width: 50vw;
    left: 25vw;
    text-align: center;
}

.showProduct .tabNameBox {
    background-color: white;
    z-index: 22;
    overflow: auto;
    line-height: 60px;
    display: flex;
    justify-content: space-between;
    font-size: 17px;
    font-family: Helvetica Tahoma;
    font-weight: 600;
}
.showProduct .tabNameBox::-webkit-scrollbar{
    height: 0;
    width: 0;
}

.tabNameBox .tabName span {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    display: -webkit-box;
    overflow: hidden;
    width: 80px;
    text-align: center;



}

.active {
    color: #ff5934;
    position: relative;
}

.active::after {
    content: "";
    position: absolute;
    background: #ff5934;
    width: 2rem;
    height: .18rem;
    border-radius: .06rem;
    bottom: .5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;

}

.allPhone {
    width: 98%;
    margin: 15px auto;
}


.card {
    margin: 5px;
    border-radius: 5px;
    box-shadow: 0px 2px 10px 1px rgba(0, 0, 0, 0.1);
    background: #fff;
    box-sizing: border-box;
    width: 48%;
    border-radius: .16rem;
    overflow: hidden;
    padding: 5px;

}

.card img {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.productCt .name {
    width: 100%;
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;

}

.productCt .price {
    font-size: 18px;
    color: #ff5934;
}

.productCt .price .sjb {
    font-size: 12px;
    margin-left: 2px;
    display: inline-block;
}

.productCt .price .icon {
    display: inline-block;
    height: 14px;
    padding: 1px;
    line-height: 14px;
    border: 1px solid gray;
    border-radius: 1px;
    font-size: 12px;
    border-color: #ff5934;
}

.productCt .oldPrice {
    font-size: 12px;
    color: rgba(0, 0, 0, .3);
}

.productCt .type {
    font-size: 12px;
    color: rgba(0, 0, 0, .3);
}
</style>